$(function() {
	$.getJSON('stockjson.jsp', function(data) {

		// create the chart
	$.myapp.detailChart = new Highcharts.StockChart({
			chart : {
                                showAxes: true,
				renderTo : 'container',
                                events:{
                                    click:function(evt){
                                        // Only allow to prompt stop order dialog       
                                        // if the chart contains future time
                                        if (!$.myApp.detailChart.futureDate) 
                                        {
                                            return;
                                        }
                                // Based on what we click on the time, set
                                // input field inside the dialog
                                $('#expire').val(Highcharts.dateFormat("%m/%d/%y",evt.xAxis[0].value));
                                    $('#price').val(Highcharts.numberFormat(evt.yAxis[0].value, 2));
                                    // Display the form to setup stop order
                                    $('#dialog').dialog("open");
                                    }
                                }
			},

			rangeSelector : {
				selected : 1
			},

			title : {
                                margin:10,
				text : 'AAPL Stock Price'
			},

			series : [{
				type : 'candlestick',
				name : 'AAPL Stock Price',
				data : data,
				dataGrouping : {
					units : [
						['week', // unit name
						[1] // allowed multiples
					], [
						'month', 
						[1, 2, 3, 4, 6]]
					]
				}
			}],
                    yAxis:{
                     title:'Price'   
                    },
                    xAxis:{
                        type:'datetime'
                    }
		});
	});
});